feat: Add Select component for form inputs by Copilot · Pull Request #34 · grasdouble/Lufa-Design-System

Copilot · 2026-06-04T21:10:19Z

The design system lacked a native <Select> component, forcing consumers to hand-roll styled <select> elements inconsistently. This adds a fully-featured Select component aligned with the existing Input visual contract.

Component API

<Select
  id="model-select"
  value={selectedValue}
  onChange={(value) => setSelectedValue(value)}
  placeholder="Select a model"
  error="Please select a value"
  size="md"
  fullWidth
>
  <Select.Option value="gpt-4">GPT-4</Select.Option>
  <Select.Option value="claude-3">Claude 3</Select.Option>
</Select>

Key design decisions:

onChange receives string directly (not a ChangeEvent) — matches the expected API from the issue
error is a string (not boolean) — component owns error message display with aria-describedby wiring
Placeholder rendered as disabled hidden option — appears in closed state but cannot be re-selected
Select.Option is a compound sub-component wrapping native <option> for ergonomic usage
Ref forwarded to the underlying <select> element

Implementation

Select.tsx — forwardRef wrapper around native <select>, compound with Select.Option
Select.module.css — Reuses --lufa-component-input-* tokens for visual parity with Input; size variants (sm/md/lg) use the same padding/font-size token ladder as the input token set
Exports: Select, SelectProps, SelectSizeValue

Coverage

Playwright CT: a11y, rendering, all states (error, disabled, fullWidth, sizes), onChange value delivery, aria-describedby association, visual regression snapshots
Storybook: Default, Placeholder, States, Size, FullWidth stories
Docusaurus: live demos + full props reference

- Add Select component with Select.Option compound sub-component - Support placeholder, error message, disabled, fullWidth, size (sm/md/lg) - Reuse component-input tokens for visual consistency with Input - Forward ref to native <select> element - Accessible: aria-invalid, aria-describedby for errors - Add Playwright CT tests - Add Storybook stories - Add Docusaurus examples and documentation

- Add `hidden` attribute to placeholder option to prevent re-selection - Rename SizeValue to SelectSizeValue for consistent naming - Remove type alias in exports

github-actions · 2026-09-28T22:27:42Z

⚠️ Changeset Validation Failed

The following packages have been modified but are not included in any changeset:

@grasdouble/lufa_design-system
@grasdouble/lufa_design-system-docusaurus
@grasdouble/lufa_design-system-playwright
@grasdouble/lufa_design-system-storybook

What you need to do:

Run pnpm changeset to create a new changeset
Select the modified packages that need version bumps
Choose the appropriate version bump (major, minor, or patch)
Write a clear description of the changes
Commit the generated changeset file

All modified packages:

❌ @grasdouble/lufa_design-system
❌ @grasdouble/lufa_design-system-docusaurus
❌ @grasdouble/lufa_design-system-playwright
❌ @grasdouble/lufa_design-system-storybook

Why is this important?

Changesets ensure that:

All package changes are properly versioned
Changelogs are automatically generated
Dependent packages are updated correctly
Release notes are comprehensive

Need help?

Changesets documentation

github-actions · 2026-09-28T22:28:50Z

⚡ Performance Budget Report

✅ All Performance Budgets Passed!

Your changes meet all performance requirements. Great work! 🎉

📊 Performance Metrics

Metric	Current	Budget	Status
Bundle Size	287.04 KB	300 KB	✅ Pass
JS Size	96.11 KB	—	ℹ️ Info
CSS Size	190.93 KB	—	ℹ️ Info
Gzipped Size	48.73 KB	50 KB	✅ Pass
Build Time	10.08s	30s	✅ Pass
CSS Cascade	153ms	1000ms	✅ Pass

📦 Size Breakdown

JavaScript : 96.11 KB
CSS        : 190.93 KB
─────────────────────
Total      : 287.04 KB
Gzipped    : 48.73 KB (16% of uncompressed)

⏱️ Timing Breakdown

Build       : 10.08s
CSS Cascade : 153ms

📊 View full run details

github-actions · 2026-09-28T22:29:50Z

🧩 Design System Packages — CI Report

⚠️ 2 check(s) failed

Please review and fix the issues highlighted below.

📋 Check Summary

Package	Check	Status
🪙 Tokens	validate:tokens	✅ Passed
🪙 Tokens	prettier:check	✅ Passed
🎨 Themes	lint	✅ Passed
🎨 Themes	typecheck	✅ Passed
🎨 Themes	validate:token-usage	✅ Passed
🎨 Themes	validate:theme:all	✅ Passed
🎨 Themes	prettier:check	✅ Passed
🧩 Main	lint	✅ Passed (2 warning(s))
🧩 Main	typecheck	✅ Passed
🧩 Main	validate:token-usage	✅ Passed
🧩 Main	validate:components:strict	✅ Passed
🧩 Main	prettier:check	✅ Passed
📖 Storybook	lint	✅ Passed
📖 Storybook	typecheck	❌ Failed
📖 Storybook	validate:token-usage	✅ Passed
📖 Storybook	prettier:check	✅ Passed
🔧 CLI	lint	✅ Passed
🔧 CLI	typecheck	✅ Passed
🔧 CLI	validate:token-usage	✅ Passed
🔧 CLI	prettier:check	✅ Passed
📚 Docusaurus	lint	✅ Passed
📚 Docusaurus	typecheck	✅ Passed
📚 Docusaurus	validate:token-usage	✅ Passed
📚 Docusaurus	prettier:check	❌ Failed
🎭 Playwright	lint	✅ Passed
🎭 Playwright	typecheck	✅ Passed
🎭 Playwright	validate:token-usage	✅ Passed
🎭 Playwright	prettier:check	✅ Passed

💡 How to Fix

Storybook — typecheck: pnpm --filter @grasdouble/lufa_design-system-storybook run typecheck
Docusaurus — prettier: pnpm --filter @grasdouble/lufa_design-system-docusaurus run prettier:write

📊 View full run details

github-actions · 2026-09-28T22:30:16Z

🎭 Playwright Component Test Results

⚠️ Test Failures Detected

Some tests failed or visual differences were detected. Please review below.

Metric	Count
Total Tests	843
Passed	841
Failed	2 ❌
Visual Diffs	0
Execution Time	N/As

📋 Components Tested

All design system components were tested in:

☀️ Light mode
🌙 Dark mode
💻 Desktop viewport (1280x720)

Tested Components:

Box, Stack, Text, Icon
Button, Badge, Divider
Center, Container, Flex, Grid
Portal, VisuallyHidden, Label
Input, Card (compositions)

🔧 Troubleshooting

Common causes of test failures or visual differences:

Token changes - Updated design tokens affect component styling
CSS changes - Modified component styles or utility classes
Font changes - Font family or weight modifications
Layout changes - Padding, margin, or sizing adjustments
Browser updates - Rendering engine differences

Run tests locally:

# Run component tests
pnpm --filter @grasdouble/lufa_design-system-playwright test

# Update snapshots if changes are intentional
pnpm --filter @grasdouble/lufa_design-system-playwright test-ct:update-snapshots

# Run tests in UI mode for debugging
pnpm --filter @grasdouble/lufa_design-system-playwright test-ct:ui

📊 View full test report

Copilot AI assigned Copilot and noofreuuuh Jun 4, 2026

Copilot started work on behalf of noofreuuuh June 4, 2026 21:10 View session

Copilot AI linked an issue Jun 4, 2026 that may be closed by this pull request

feat: Add Select component for form inputs #33

Open

Copilot AI changed the title ~~[WIP] Add Select component for form inputs~~ feat: Add Select component for form inputs Jun 4, 2026

Copilot finished work on behalf of noofreuuuh June 4, 2026 21:23

Copilot AI requested a review from noofreuuuh June 4, 2026 21:23

Copilot AI added 2 commits September 29, 2026 00:27

fix: Address code review feedback on Select component

f7249ff

- Add `hidden` attribute to placeholder option to prevent re-selection - Rename SizeValue to SelectSizeValue for consistent naming - Remove type alias in exports

noofreuuuh force-pushed the copilot/add-select-component branch from 4235f48 to f7249ff Compare September 28, 2026 22:27

Navigation Menu

feat: Add Select component for form inputs - #34

feat: Add Select component for form inputs#34
noofreuuuh with Copilot wants to merge 2 commits into
mainfrom
copilot/add-select-component

Copilot AI commented Jun 4, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 28, 2026

Uh oh!

github-actions Bot commented Sep 28, 2026

Uh oh!

github-actions Bot commented Sep 28, 2026

Uh oh!

github-actions Bot commented Sep 28, 2026

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

Copilot AI commented Jun 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Component API

Implementation

Coverage

Uh oh!

github-actions Bot commented Sep 28, 2026

⚠️ Changeset Validation Failed

What you need to do:

All modified packages:

Why is this important?

Need help?

Uh oh!

github-actions Bot commented Sep 28, 2026

⚡ Performance Budget Report

✅ All Performance Budgets Passed!

📊 Performance Metrics

📦 Size Breakdown

⏱️ Timing Breakdown

Uh oh!

github-actions Bot commented Sep 28, 2026

🧩 Design System Packages — CI Report

⚠️ 2 check(s) failed

📋 Check Summary

💡 How to Fix

Uh oh!

github-actions Bot commented Sep 28, 2026

🎭 Playwright Component Test Results

⚠️ Test Failures Detected

📋 Components Tested

🔧 Troubleshooting

Uh oh!

This branch has not been deployed

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Jun 4, 2026 •

edited

Loading